<template>
    <div class="create-order">
        <s-header :name="'生成订单'" @callback="deleteLocal"></s-header>
        <div class="address-wrap">
            <div class="name" @click="goTo">
                <span>{{ address.name }} </span>
                <span>{{ address.phoneNumber }}</span>
            </div>
            <div class="address">
                {{ address.province }} {{ address.city }} {{ address.region }} {{ address.detailAddress }}
                {{address.postCode}}
            </div>
            <van-icon class="arrow" name="arrow"/>
        </div>
        <div class="good">
            <div class="good-item" v-for="(item, index) in cartList" :key="index">
                <div class="good-img"><img :src="prefix(item.productPic)" alt=""></div>
                <div class="good-desc">
                    <div class="good-title">
                        <span>{{ item.productName }}</span>
                        <span>x{{ item.quantity }}</span>
                    </div>
                    <div class="good-btn">
                        <div class="price">¥{{ item.price }}</div>
                    </div>
                </div>
            </div>
            <br>
            <van-cell-group>
                <van-cell title="配送方式" value="普通配送/免邮"/>
                <van-cell title="开具发票" value="增值税电子普通发票"/>
                <br>
                <van-cell>
                    <template>
                        <van-radio-group v-model="checked">
                            <van-radio name="1" checked-color="#ee0a24">匿名购买</van-radio>
                        </van-radio-group>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <div class="pay-wrap">
            <div class="price">
                <span>商品金额</span>
                <span>¥{{ total }}</span>
            </div>
            <van-button @click="createOrder" class="pay-btn" color="#1baeae" type="primary" block>生成订单</van-button>
        </div>
        <van-popup
                closeable
                :close-on-click-overlay="false"
                v-model="showPay"
                position="bottom"
                :style="{ height: '30%' }"
                @close="close"
        >
            <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
                <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="payOrder(1)">支付宝支付
                </van-button>
                <van-button color="#4fc08d" block @click="payOrder(2)">微信支付</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import sHeader from '../../../components/SimpleHeader'
    import {getCart, getByCartItemIds} from '../../../api/cart'
    import {getDefaultAddress, getAddressDetail} from '../../../api/address'
    import {createOrder, paySuccess} from '../../../api/order'
    import {payOrderAlipay} from '../../../api/pay'
    import {setLocal, getLocal} from '../../../common/js/utils'
    import {Toast} from 'vant'
    import axios from "axios";
    import baseURL from "../../../utils/baseURLConfig";

    export default {
        name: "orderCreate", components: {
            sHeader
        },
        data() {
            return {
                checked: '1',
                cartList: [],
                address: {},
                showPay: false,
                orderNo: '',
                cartItemIds: []
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            async init() {
                Toast.loading({message: '加载中...', forbidClick: true});
                const {addressId, cartItemIds, data} = this.$route.query
                const _cartItemIds = cartItemIds ? JSON.parse(cartItemIds) : JSON.parse(getLocal('cartItemIds'))
                setLocal('cartItemIds', JSON.stringify(_cartItemIds))
                let params = new URLSearchParams();
                params.append('ids', _cartItemIds)
                getByCartItemIds(params).then(res => {
                    const result = res.data;
                    this.cartList = result
                })
                if (addressId !== undefined) {
                    getAddressDetail(addressId).then(res => {
                        this.address = res.data
                    })
                } else {
                    getDefaultAddress().then(res => {
                        this.address = res.data
                    })
                }
                Toast.clear()
            },
            goTo() {
                this.$router.push({path: `address?cartItemIds=${JSON.stringify(this.cartItemIds)}`})
            },
            deleteLocal() {
                setLocal('cartItemIds', '')
            },
            async createOrder() {
                const data = {
                    memberReceiveAddressId: this.address.id,
                    cartIds: this.cartList.map(item => item.id)
                }
                createOrder(data).then(res => {
                    this.orderNo = res.data.order.id
                })
                setLocal('cartItemIds', '')
                this.showPay = true
            },
            close() {
                this.$router.push({path: 'order'})
            },
            payOrder() {
                Toast.loading
                axios.post(baseURL +'/alipay/pay?money=' + this.total + '&subject=AvaMall收款中心&tradeNo=' + this.orderNo)
                    .then(res => {
                        const divForm = document.getElementsByTagName('divform')
                        if (divForm.length) {
                            document.body.removeChild(divForm[0])
                        }
                        const div = document.createElement('divform')
                        div.innerHTML = res.data.msg // data就是接口返回的form 表单字符串
                        document.body.appendChild(div)
                        document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                        document.forms[0].submit()

                        this.showPay = false
                        this.init()
                    })
            },
        },
        computed: {
            total: function () {
                let sum = 0
                this.cartList.forEach(item => {
                    sum += item.quantity * item.price
                })
                return sum
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../../common/style/mixin';

    .create-order {
        background: #f9f9f9;

        .address-wrap {
            margin-bottom: 20px;
            background: #fff;
            position: relative;
            margin-top: 44px;
            font-size: 14px;
            padding: 15px;
            color: #222333;

            .name, .address {
                margin: 10px 0;
            }

            .arrow {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 20px;
            }

            &::before {
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                height: 2px;
                background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                background-size: 80px;
                content: '';
            }
        }

        .good {
            margin-bottom: 120px;
        }

        .good-item {
            padding: 10px;
            background: #fff;
            display: flex;

            .good-img {
                img {
                    .wh(100px, 100px)
                }
            }

            .good-desc {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;
                padding: 20px;

                .good-title {
                    display: flex;
                    justify-content: space-between;
                }

                .good-btn {
                    display: flex;
                    justify-content: space-between;

                    .price {
                        font-size: 16px;
                        color: red;
                        line-height: 28px;
                    }

                    .van-icon-delete {
                        font-size: 20px;
                        margin-top: 4px;
                    }
                }
            }
        }

        .pay-wrap {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            padding: 10px 0;
            padding-bottom: 50px;
            border-top: 1px solid #e9e9e9;

            > div {
                display: flex;
                justify-content: space-between;
                padding: 0 5%;
                margin: 10px 0;
                font-size: 14px;

                span:nth-child(2) {
                    color: red;
                    font-size: 18px;
                }
            }

            .pay-btn {
                position: fixed;
                bottom: 7px;
                right: 0;
                left: 0;
                width: 90%;
                margin: 0 auto;
            }
        }
    }
</style>
